Design for Mobile Applications - Topic 3 Summary
1. Introduction to Mobile Design
Mobile design focuses on creating seamless, intuitive, and enjoyable experiences for users on mobile devices.
Key Principles
- User-Centric Approach: Design must prioritize user needs, preferences, and behaviors
- Adapt to Technology: Stay updated with new devices, platforms, and design trends
- Meet User Expectations: Mobile users expect high-quality, fast, and reliable experiences
- First Impressions Matter: Visual design sets the tone for user trust and engagement
- Balance Creativity & Limitations: Create visually appealing designs within device constraints
2. Elements of Mobile Design
Seven key elements define mobile design: Context, Message, Look and Feel, Layout, Color, Typography, and Graphics.
2.1 Context
Definition: The environment, circumstances, and conditions surrounding users when they interact with mobile content.
Why It Matters: Influences user behavior, preferences, and expectations. Affects usability, engagement, and satisfaction.
Key Aspects to Consider
- Physical environment (location, noise, lighting)
- Device characteristics (screen size, input methods, network speed)
- User's goals, motivations, and emotional state
- Socio-cultural factors (language, cultural norms, accessibility needs)
Key Questions
| Question |
Considerations |
| Who are the users? |
Understand behavior and assumptions |
| What is happening? |
Circumstances for content absorption |
| When will they interact? |
Available timeframes |
| Where are the users? |
Public/private spaces, indoor/outdoor settings |
| Why will they use your app? |
Value gained in current situation |
| How are they using their device? |
Device position, orientation, input method |
2.2 Message
Definition: The overall impression created through visual design that communicates the app's purpose and value.
Key Point: In mobile design, branding opportunities are limited, but messaging is crucial for user understanding and engagement.
Message Examples
| App |
Message |
Design Characteristics |
| Yahoo |
Clean, focused on search and location |
Clean interface, color separation |
| Disney+ |
Bold, busy, disorienting for younger audience |
Character-focused, colorful, immersive |
| Wikipedia |
Clean, minimal, text-heavy |
Article-focused, simple, informative |
| Amazon |
Minimal but messy, product-heavy |
Product-focused, cluttered |
The user's opinion matters most—design should convey the right message in the right context.
2.3 Look and Feel
Definition: The appearance and style of a design, including both visual and tactile elements.
Importance: Influences user interaction and emotional response through consistent and intentional design decisions.
Establishing Look and Feel
- Provide rationale for design decisions
- Use design patterns and style guides for consistency
- Align with user needs and preferences
- Consider platform-specific design guidelines (iOS vs. Android)
2.4 Layout
Definition: How content is organized and presented on the screen, affecting readability and user experience.
Importance of Layout
- Defines information hierarchy and visual flow
- Separates content from style discussions
- Prevents unnecessary changes based on subjective feedback
Navigation Types
Touch Navigation (Most Common)
- Primary actions at bottom of screen
- Secondary actions at top
- Content area in between
- Supports intuitive thumb-based interaction
Scroll Navigation
- Uses device's D-pad for navigation
- Vertical scrolling most common
- Horizontal navigation possible but can be cumbersome
Layout Types
| Layout Type |
Characteristics |
Use Cases |
| Fixed Layout |
Set number of pixels, rigid structure |
Specific screen sizes, controlled environments |
| Fluid Layout |
Scales to screen width, flexible |
Multiple devices, orientation changes |
2.5 Color
Definition: The use of color to create visual hierarchy, convey meaning, and enhance user experience.
Importance: Color affects mood, readability, and brand recognition.
Color Depth
Definition: Number of bits representing the color of a single pixel.
| Bits |
Shades |
Description |
| 1 bit |
2 |
Black and white |
| 2 bits |
4 |
Shades of gray |
| 8 bits |
256 |
Basic color |
| 10 bits |
1024 |
High quality |
| 12 bits |
4096 |
Professional quality |
| 24 bits |
16.7M |
True color |
Color Psychology
Different colors evoke different emotions and associations. Consider cultural context for global audiences.
Color Palette Types
| Palette Type |
Description |
Example Use |
| Sequential |
Primary, secondary, tertiary colors |
Brand consistency |
| Adaptive |
Colors from supporting graphics/images |
Device-native look |
| Inspired |
Colors extracted from design inspiration |
Unique, visually appealing designs |
2.6 Typography
Definition: The arrangement of type to make written language legible, readable, and appealing.
Importance: Typography directly impacts readability and overall visual appeal of mobile content.
Key Considerations
Pixel Density vs. Subpixel Rendering
- Pixel Density: Pixels per inch (PPI) - higher density = sharper text
- Subpixel Rendering: Divides pixels into RGB components for smoother edges (used in Windows Mobile)
Best Practices
- Use legible fonts appropriate for content
- Ensure sufficient contrast between text and background
- Use appropriate font sizes for small screens
- Provide adequate line spacing (leading)
- Use headings and short paragraphs
- Leave space around text edges
Font Type Recommendations
- Sans-serif: Navigation, compact areas
- Serif: Lengthy content, dense areas
- High-contrast: Essential for outdoor readability
2.7 Graphics
Definition: Visual elements that supplement or represent content in mobile designs.
Importance: Graphics enhance visual experience and communicate ideas efficiently in constrained spaces.
Types of Graphics
Iconography
- Most common form of mobile graphics
- Should be clear and easily recognizable
- Use familiar metaphors and symbols
Photos and Images
- Add meaning and visual appeal
- Must be optimized for performance
- Must adapt to device orientation changes
Best Practices
- Avoid overwhelming users with too much visual information
- Keep graphics simple and meaningful
- Test graphics on multiple devices
- Optimize for fast loading
- Ensure meaning remains clear across devices
3. Prototyping Platforms
Figma
Figma is the leading digital design and prototyping tool for mobile application design.
Key Features
| Feature |
Description |
| Real-time Collaboration |
Multiple designers can work on the same file simultaneously |
| Vector Editing |
Create and edit scalable vector graphics |
| Prototyping |
Create interactive prototypes to test user flows |
| Design Components |
Create reusable components for consistency |
| Version History |
Track changes and revert to previous versions |
| Platform Agnostic |
Works in any web browser on any device |
Why Use Figma for Mobile Design?
- Enables rapid iteration and testing
- Facilitates team collaboration
- Supports responsive design testing
- Provides feedback collection tools
- Integrates with other design tools and platforms
4. Quick Reference Guide
Design Elements Summary
| Element |
Key Points |
Best Practices |
| Context |
User environment, device, goals |
Research user context thoroughly |
| Message |
App's purpose and value proposition |
Align with user needs and context |
| Look and Feel |
Visual style and user experience |
Establish guidelines and maintain consistency |
| Layout |
Content organization and navigation |
Prioritize primary actions, ensure readability |
| Color |
Visual hierarchy and mood |
Use appropriate depth, consider psychology |
| Typography |
Readability and content presentation |
Use legible fonts, proper spacing, contrast |
| Graphics |
Visual communication and appeal |
Keep simple, test on multiple devices |
Prototyping Tools Comparison
| Tool |
Real-time Collaboration |
Prototyping |
Platform |
| Figma |
✓ Yes |
✓ Yes |
Web-based |
| Adobe XD |
✓ Yes |
✓ Yes |
Desktop/Mac |
| Sketch |
✗ No |
✓ Yes |
Mac only |
| Protopie |
✓ Yes |
✓ Advanced |
Web/Desktop |
5. Exam Preparation Tips
- Memorize the seven design elements and their importance
- Understand context deeply - it's the foundation for all other design decisions
- Practice analyzing real apps for their messaging and look & feel
- Compare layout approaches for different navigation types
- Calculate color depth and understand its impact on design
- Know typography best practices for mobile screens
- Be familiar with Figma and its key features
- Prepare to discuss trade-offs between different design choices
6. Summary
Mobile design requires a holistic approach that considers user context, communicates clear messages, and balances aesthetics with functionality.
Seven elements form the foundation of mobile design: Context, Message, Look and Feel, Layout, Color, Typography, and Graphics. Each element must work together to create a cohesive and effective user experience.
Prototyping tools like Figma enable designers to test and iterate designs efficiently, ensuring that the final product meets user needs and business goals.
Successful mobile design puts the user first, adapts to context, and creates meaningful experiences through careful consideration of all design elements.